<!--
 * @Author: 秦少卫
 * @Date: 2024-05-21 10:18:57
 * @LastEditors: June
 * @LastEditTime: 2024-07-26 21:12:56
 * @Description: 边框
-->
<template>
  <div
    class="attr-item-box"
    v-if="mixinState.mSelectMode === 'one' && !isGroup"
  >
    <!-- <h3>边框</h3> -->
    <el-divider content-position="left"><h4>边框</h4></el-divider>
    <!-- 通用属性 -->
    <div>
      <el-row :gutter="12" style="margin-right: 10px">
        <el-col :span="12">
          <div class="asa-number-warp">
            <span class="label" style="margin-right: 10px">{{
              $t('color')
            }}</span>
            <div style="flex: 1">
              <el-color-picker
                v-model="baseAttr.stroke"
                @change="(value) => changeCommon('stroke', value)"
                show-alpha
              />
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <InputNumber
            v-model="baseAttr.strokeWidth"
            @on-change="(value) => changeCommon('strokeWidth', value)"
            :append="$t('width')"
            :min="0"
          ></InputNumber>
        </el-col>
      </el-row>

      <div class="asa-number-warp">
        <span
          style="
            flex: 0 0 48px;
            font-size: var(--el-form-label-font-size);
            color: var(--el-text-color-regular);
          "
          >{{ $t('attributes.stroke') }}</span
        >
        <div class="content">
          <el-select v-model="baseAttr.strokeDashArray" @change="borderSet">
            <el-option
              v-for="item in strokeDashList"
              :value="item.label"
              :label="item.label"
              :key="`stroke-${item.label}`"
            >
              {{ item.label }}
            </el-option>
          </el-select>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="AttrBute">
import useSelect from '@/hooks/select'
import InputNumber from './InputNumber'

const update = getCurrentInstance()
const { mixinState, canvasEditor } = useSelect()

const groupType = ['group']
// 属性值
const baseAttr = reactive({
  stroke: '#fff',
  strokeWidth: 0,
  strokeDashArray: []
})

const strokeDashList = [
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [],
      strokeLineCap: 'butt'
    },
    label: 'Stroke'
  },
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [1, 10],
      strokeLineCap: 'butt'
    },
    label: 'Dash-1'
  },
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [1, 10],
      strokeLineCap: 'round'
    },
    label: 'Dash-2'
  },
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [15, 15],
      strokeLineCap: 'square'
    },
    label: 'Dash-3'
  },
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [15, 15],
      strokeLineCap: 'round'
    },
    label: 'Dash-4'
  },
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [25, 25],
      strokeLineCap: 'square'
    },
    label: 'Dash-5'
  },
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [25, 25],
      strokeLineCap: 'round'
    },
    label: 'Dash-6'
  },
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [1, 8, 16, 8, 1, 20],
      strokeLineCap: 'square'
    },
    label: 'Dash-7'
  },
  {
    value: {
      strokeUniform: true,
      strokeDashArray: [1, 8, 16, 8, 1, 20],
      strokeLineCap: 'round'
    },
    label: 'Dash-8'
  }
]

const isGroup = computed(() => groupType.includes(mixinState.mSelectOneType))
// 属性获取
const getObjectAttr = (e) => {
  const activeObject = canvasEditor.canvas.getActiveObject()

  // 不是当前obj，跳过
  if (e && e.target && e.target !== activeObject) return
  if (activeObject && !groupType.includes(activeObject.type)) {
    baseAttr.stroke = activeObject.get('stroke')
    baseAttr.strokeWidth = activeObject.get('strokeWidth')
    const strokeDashArray = JSON.stringify(
      activeObject.get('strokeDashArray') || []
    )
    const target = strokeDashList.find((item) => {
      return (
        JSON.stringify(item.value.strokeDashArray) === strokeDashArray &&
        activeObject.get('strokeLineCap') === item.value.strokeLineCap
      )
    })
    if (target) {
      baseAttr.strokeDashArray = target.label
    }
  }
}

// 通用属性改变
const changeCommon = (key, value) => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0]
  if (activeObject) {
    activeObject.set(key, value)
    activeObject.set('strokeUniform', true)
    canvasEditor.canvas.renderAll()
  }
}

// 边框设置
const borderSet = (key) => {
  const activeObject = canvasEditor.canvas.getActiveObjects()[0]
  if (activeObject) {
    const stroke = strokeDashList.find((item) => item.label === key)
    activeObject.set(stroke.value)
    canvasEditor.canvas.renderAll()
  }
}

const selectCancel = () => {
  update?.proxy?.$forceUpdate()
}

onMounted(() => {
  // 获取字体数据
  getObjectAttr()
  canvasEditor.on('selectCancel', selectCancel)
  canvasEditor.on('selectOne', getObjectAttr)
  canvasEditor.canvas.on('object:modified', getObjectAttr)
})

onBeforeUnmount(() => {
  canvasEditor.off('selectCancel', selectCancel)
  canvasEditor.off('selectOne', getObjectAttr)
  canvasEditor.canvas.off('object:modified', getObjectAttr)
})
</script>

<style scoped lang="scss">
:deep(.el-color-picker__trigger) {
  width: 64px;
}
:deep(.el-select__wrapper) {
  background: #f8f8f9;
  box-shadow: none;
}
.asa-number-warp {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #f6f7f9;
  border-radius: 5px;
  padding: 0 15px 0 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
  .label {
    flex: 0 0 32px;
    font-size: var(--el-form-label-font-size);
    color: var(--el-text-color-regular);
  }
  .content {
    width: 100%;
  }
}
</style>
